<template>
  <div class="Holiday-container">
    <div class="table-wrap">
      <v-skeleton-loader
        v-if="loading"
        height="100%"
        type="list-item@20"
      ></v-skeleton-loader>
      <Table
        v-else
        @add="addHoliday"
        @edit="openEditHoliday"
        @delete="openDeleteHoliday"
        addTooltip="Add Holiday"
        editTooltip="Edit Holiday"
        deleteTooltip="Delete Holiday"
        hide-default-footer
        :headers="tableHeaders"
        :items="items"
      >
      </Table>
    </div>
    <Dialog
      v-model="showDialog"
      @submit="save"
      :show-save="step !== 3"
      :title="dialogTitle"
      width="480"
    >
      <AddEditHoliday
        v-if="step === 1 || step === 2"
        ref="addEditHoliday"
      ></AddEditHoliday>
      <DeleteHoliday
        v-else-if="step === 3"
        :item="selectedItem"
        @delete="deleteHoliday"
        ref="deleteHoliday"
      ></DeleteHoliday>
    </Dialog>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Table from "@/components/Maintenance/Table/Table.vue";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import AddEditHoliday from "@/components/Maintenance/Setting/Holiday/AddEditHoliday.vue";
import DeleteHoliday from "@/components/Maintenance/Setting/Holiday/DeleteHoliday.vue";
interface IHolidayItem {
  id: string;
  date: string;
  description: string;
}
@Component({
  components: {
    Table,
    Dialog,
    AddEditHoliday,
    DeleteHoliday,
  },
})
export default class Holiday extends Vue {
  loading = false;
  step = -1;
  // dialog
  showDialog = false;
  dialogTitle = "";
  openDialog() {
    this.showDialog = true;
  }
  closeDialog() {
    this.showDialog = false;
  }
  // table
  selectedItem: IHolidayItem | null = null;
  tableHeaders = [
    {
      text: "Year-Month-Date ",
      sortable: false,
      value: "date",
    },
    {
      text: "Description",
      sortable: false,
      value: "description",
    },
    {
      sortable: false,
      align: "right",
      value: "action",
    },
  ];
  items: IHolidayItem[] = [];

  getItems() {
    this.loading = true;
    setTimeout(() => {
      this.items = [
        {
          id: "1",
          date: "2022-01-01",
          description: "The first day of January",
        },
        {
          id: "2",
          date: "2019-02-01",
          description: "Lunar New Year’s Day",
        },
        {
          id: "3",
          date: "2022-02-02",
          description: "The second day of Lunar New Year",
        },
      ];
      this.loading = false;
    }, 1500);
  }

  addHoliday() {
    this.step = 1;
    this.dialogTitle = "Add Holiday";
    this.openDialog();
    this.$nextTick(() => {
      (this.$refs.addEditHoliday as AddEditHoliday).resetForm();
    });
  }

  openEditHoliday(item: IHolidayItem) {
    this.step = 2;
    this.dialogTitle = "Edit Holiday";
    this.selectedItem = item;
    this.openDialog();
    this.$nextTick(() => {
      (this.$refs.addEditHoliday as AddEditHoliday).setFormData(item);
    });
  }

  openDeleteHoliday(item: IHolidayItem) {
    this.step = 3;
    this.dialogTitle = "Delete Holiday";
    this.selectedItem = item;
    this.openDialog();
  }

  async save() {
    const addEditHolidayRef = this.$refs.addEditHoliday as AddEditHoliday;
    const result = await addEditHolidayRef.validateFormData();
    if (result) {
      if (this.step === 1) {
        result.id = String(new Date().getTime());
        this.items.push(result as IHolidayItem);
      } else {
        Object.assign(this.selectedItem as IHolidayItem, result);
      }
      this.closeDialog();
    }
  }

  deleteHoliday(item: IHolidayItem) {
    const index = this.items.indexOf(item);
    this.items.splice(index, 1);
    this.closeDialog();
  }

  created() {
    this.getItems();
  }

  mounted() {
    this.$store.commit("MaintenanceStore/switchActionIcon", "mdi-file-export");
  }
}
</script>

<style lang="scss" scoped>
@import "./Holiday.scss";
</style>
